<template>
  <el-row width="100%">
    <el-col :span="18" :offset="3">
  <div>
    <el-row>
      <el-col :span="2">
      <el-dropdown trigger="click" style="position: relative;top: 8px" @command="handleCommand">
      <span class="el-dropdown-link">
        审核状态<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">审核状态</el-dropdown-item>
          <el-dropdown-item command="b">待审核</el-dropdown-item>
          <el-dropdown-item command="c">审核失败</el-dropdown-item>
          <el-dropdown-item command="d">审核成功</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      </el-col>
      <el-col :span="2">
        <el-dropdown trigger="click" style="position: relative;top: 8px;left: 5px" @command="handleCommand">
      <span class="el-dropdown-link">
        入库状态<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">入库状态</el-dropdown-item>
            <el-dropdown-item command="b">已作废</el-dropdown-item>
            <el-dropdown-item command="c">待入库</el-dropdown-item>
            <el-dropdown-item command="d">部分入库</el-dropdown-item>
            <el-dropdown-item command="e">已入库</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="4">
        <el-input  placeholder="请输入内容" v-model="input" clearable style="width: 200px"></el-input>
      </el-col>
      <el-col :span="2">
      <el-button icon="el-icon-search" circle></el-button>
      </el-col>
      <el-col :span="2" :offset="9">
        <el-button>导出</el-button>
      </el-col>
      <el-col :span="1">
        <el-button type="primary"><router-link to="/purchase/inc_purchase_order">新增</router-link></el-button>
      </el-col>
    </el-row>
    <div style="height: 20px"></div>
  <el-table
    :data="tableData"
    border
    style="width: 1230px">
    <el-table-column
      fixed
      prop="date"
      label="采购单号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="供应商"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="采购金额"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="采购人员"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="制单人员"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="制单日期"
      width="120">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="审核状态"
      width="120">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="入库状态"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="50">
      <template slot-scope="scope">
        <el-dropdown @command="handleCommand" tigger="click" >
      <span class="el-dropdown-link">
        ...
      </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">详情</el-dropdown-item>
            <el-dropdown-item command="b">修改</el-dropdown-item>
            <el-dropdown-item command="c">审核</el-dropdown-item>
            <el-dropdown-item command="d">删除</el-dropdown-item>
            <el-dropdown-item command="e">打印</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
  </div>
      <div style="height: 20px"></div>
      <div class="block" style="height: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </el-col>
  </el-row>

</template>

<script>
  export default {
    name: "PurchaseOrder",
    methods: {
      handleClick(row) {
        console.log(row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    },

    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        input: '',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>
